<template>
    <div class="flow-list-container flex flex-col">
        <splitpanes class="default-theme">
            <pane size="25" >
                <a-card class="h-full ">
                    <a-tabs v-model:activeKey="state.queryForm.searchFlag" @change="handdleTabChange">
                        <a-tab-pane :key="0" tab="待审批"></a-tab-pane>
                        <a-tab-pane :key="1" tab="已审批" force-render></a-tab-pane>
                        <a-tab-pane :key="2" tab="抄送我"></a-tab-pane>
                        <a-tab-pane :key="3" tab="我的发起"></a-tab-pane>
                    </a-tabs>
                    <loading2 v-if="state.loading"/>
                    <template v-else>
                        <div class="flow-list">
                            <div class="search flex items-center mb-2">
                                <a-input class="mr-1" v-model:value="state.queryForm.formName" placeholder="单据名称">
                                    <template #suffix>
                                        <SearchOutlined />
                                    </template>
                                </a-input>
                                <a-tooltip placement="top">
                                    <template #title>
                                        <span>获取更多数据</span>
                                    </template>
                                    <a-button class="mr-1" @click="getMoreData">
                                        <RetweetOutlined /> 
                                    </a-button>
                                </a-tooltip>
                                <a-popover title="高级筛选" trigger="click" placement="right">
                                    <template #content>
                                        <div class="mb-2">
                                            <a-input style="width: 350px;"v-model:value="state.queryForm.userName" placeholder="发起人"></a-input>
                                        </div>
                                        <div class="mb-2">
                                            <a-select
                                                v-model:value="state.queryForm.groupId"
                                                placeholder="流程分组"
                                                :options="state.options"
                                                allowClear
                                                style="width: 350px;"
                                            ></a-select>
                                        </div>
                                        <div class="mb-2">
                                            <a-range-picker 
                                            show-time  
                                            format="YYYY-MM-DD HH:mm:ss" 
                                            valueFormat="YYYY-MM-DD HH:mm:ss"
                                            style="width: 350px;"  
                                            v-model:value="state.queryForm.dateRange" 
                                            @change="(v:any)=>{
                                                state.queryForm.startTime = v[0]
                                                state.queryForm.endTime = v[1]
                                            }"/>
                                        </div>
                                        <div class="mb-2 flex justify-end w-full">
                                            <a-button class="mr-2" @click="handleReset">重置</a-button>
                                            <a-button type="primary" @click="handleQuery">检索</a-button>
                                        </div>
                                    </template>
                                    <a-button><FilterOutlined /></a-button>
                                </a-popover>
                            </div>
                            <div class="list" v-if="state.tableData.length > 0" ref="formListRef">
                                <a-card  hoverable class="form-item " :class="{'active':state.activeIndex == index}" v-for="(item,index) in state.tableData" :key="index" @click="selectFlowForm(item,index)">
                                    <header class="w-full flex items-center justify-between mb-2">
                                        <div class="label">
                                            单据名称：{{ item.formName }}
                                        </div>
                                        <div class="status">
                                            <a-tag v-if="item.isFinish == 0 && (item.status == 1 || item.status == 0)" color="pink">审批中</a-tag>
                                            <a-tag v-else-if="item.isFinish == 1 && item.status == 2" color="blue">已审批</a-tag>
                                            <a-tag v-else-if="item.isFinish == 1 && item.status == 3" color="red">已拒绝</a-tag>
                                        </div>
                                    </header>
                                    <div class="content flex justify-between items-center">
                                        <div class="user">
                                            创建人：{{ item.createUserName }}
                                        </div>
                                        <div class="time flex-1">
                                            提交时间：{{ item.createTime }}
                                        </div>
                                    </div>
                                </a-card>
                                <div class="get-more mb-1" ref="getMoreRef"></div>
                            </div>
                            <a-empty v-else/>
                        </div>
                    </template>
                </a-card>
            </pane>
            <pane size="75" >
                <a-card class="h-full wf">
                    <div class="wf-container" v-if="state.activeWf">
                        <header class="flex justify-between items-center p-2">
                            <div class="id">
                                单据编号：{{ state.activeWf?.formDataId }}
                            </div>
                            <PrinterOutlined class="text-2xl cursor-pointer"/>
                        </header>
                        <div class="workflow">
                            <div class="company-header relative overflow-hidden rounded-lg  bg-white border border-gray-100 mb-6">
                                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-blue-400 to-teal-400"></div>
                                <div class="container mx-auto px-6 py-6 flex flex-col md:flex-row items-center justify-between">
                                    <div class="flex items-center mb-4 md:mb-0 space-x-4">
                                        <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center shadow-sm transform transition-transform duration-300 hover:scale-105">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.152.001-.228.004l-.062.002a5.986 5.986 0 011.99 1.46 5.986 5.986 0 011.46 1.99l.002.062c.003.076.004.152.004.228v.07c0 .076-.001.152-.004.228l-.002.061a5.989 5.989 0 01-1.46 1.99 5.989 5.989 0 01-1.99 1.46l-.062.002c-.076.003-.152.004-.228.004h-.07c-.076 0-.152-.001-.228-.004l-.062-.002a5.986 5.986 0 01-1.99-1.46 5.986 5.986 0 01-1.46-1.99l-.002-.062c-.003-.076-.004-.152-.004-.228v-.07c0-.076.001-.152.004-.228l.002-.061a5.989 5.989 0 011.46-1.99A5.989 5.989 0 018.78 4.006l.062-.002C9.304 4.001 9.48 4 9.656 4h.687c.177 0 .353.001.529.006l.062.002a5.986 5.986 0 011.99 1.46A5.986 5.986 0 0114.34 6.006l.002.062c.003.076.004.152.004.228v.07z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h1 class="text-xl md:text-2xl font-bold text-gray-800 tracking-tight transition-colors duration-300 hover:text-blue-600 flex items-center justify-between">
                                                <span>单据名称:{{ state.activeWf?.formName }}</span>
                                            </h1>
                                            <p class="text-gray-600 mt-1 text-sm md:text-base max-w-md flex">
                                                <div class="mr-2">发起人:{{ state.activeWf.createUserName }}|{{ state.activeWf.createUserId }}</div>
                                                <div>创建时间:{{ state.activeWf.createTime }}</div>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full h-1 bg-gradient-to-r from-blue-500 via-blue-400 to-teal-400"></div>
                                <div class="form-render">
                                    <div class="form-card">
                                        <div class="form-content">
                                            <div 
                                                class="form-item" 
                                                v-for="widget in widgets" 
                                                :key="widget.id"
                                                :class="{'required': widget.options.required}"
                                            >
                                                <div class="form-label">
                                                    {{ widget.options.label }}
                                                    <span v-if="widget.options.required" class="required-mark">*</span>
                                                </div>
                                                <div class="form-value">
                                                    <template v-if="formData[widget.options.name] !== undefined">
                                                        {{ formData[widget.options.name] }}
                                                    </template>
                                                    <template v-else>
                                                        <span class="empty-value">--</span>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="approval flex-1 pl-4 overflow-auto">
                                    <div class="approval-header mb-4">
                                        <h2 class="text-lg font-bold">审批流程</h2>
                                    </div>
                                    <template v-if="state.activeWf.wfProcess != null">
                                        <div class="approval-status mb-4" v-if="true">
                                            <a-alert v-if="state.activeWf.wfProcess.isFinish == 0 && (state.activeWf.wfProcess.status == 1 || state.activeWf.wfProcess.status == 0)" message="当前状态：待审批" type="info" show-icon />
                                            <a-alert v-else-if="state.activeWf.wfProcess.isFinish == 1 && state.activeWf.wfProcess.status == 2" message="当前状态：已审批" type="success" show-icon />
                                            <a-alert v-else-if="state.activeWf.wfProcess.isFinish == 1 && state.activeWf.wfProcess.status == 3" message="当前状态：已拒绝" type="error" show-icon />
                                            <a-alert v-else-if="state.activeWf.wfProcess.isFinish == 0 && state.activeWf.wfProcess.status == 3" message="当前状态：已撤回" type="warning" />
                                        </div>
    
                                        <div class="approval-timeline">
                                            <a-timeline>
                                                <a-timeline-item 
                                                    v-for="item in state.activeWf.wfProcess.flowNodes" 
                                                    :key="item"
                                                    :color="item.isFinish ? 'green' : 'blue'"
                                                >
                                                    <div class="timeline-title font-medium">{{ item.nodeName }}</div>
                                                    <div class="timeline-content text-gray-500">
                                                        <template v-if="item.nodeProp =='start'">
                                                            <div>申请人：{{ item.createUser }}</div>
                                                        </template>
                                                        <template v-else-if="item.nodeProp == 'approval'">
                                                            <div>审批人：{{ item.label }}</div>
                                                            <div>{{ item.content }}</div>
                                                        </template>
                                                        <template v-else-if="item.nodeProp == 'copy'">
                                                            <div>抄送人：自动抄送</div>
                                                            <div>{{ item.content }}</div>
                                                        </template>
                                                        <template v-else-if="item.nodeProp == 'end'">
                                                            <div>{{ item.content }}</div>
                                                        </template>
                                                    </div>
                                                </a-timeline-item>
                                            </a-timeline>
                                        </div>
    
                                        <div class="approval-info mt-6 bg-gray-50 p-4 rounded">
                                            <h3 class="font-medium mb-2">流程信息</h3>
                                            <div class="info-item flex mb-2">
                                                <span class="info-label w-24 text-gray-500">表单类型：</span>
                                                <span>{{state.activeWf.formName}}申请</span>
                                            </div>
                                            <div class="info-item flex mb-2">
                                                <span class="info-label w-24 text-gray-500">流程编号：</span>
                                                <span>{{ state.activeWf.flowId }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <footer class="approval-footer">
                        <div class="approval-actions">
                            <button class="btn btn-primary" @click="approval('agree')" v-if="hasauth(0)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                                </svg>
                                同意
                            </button>
                            <button class="btn btn-danger" @click="approval('disagree')" v-if="hasauth(1)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                </svg>
                                拒绝
                            </button>
                            <button class="btn btn-warning" @click="approval('extraSign',0)" v-if="hasauth(2)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M9.828 3.562a.5.5 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" transform="matrix(-1 0 0 1 16 0)"/>
                                </svg>
                                后加签
                            </button>
                            <button class="btn btn-warning" @click="approval('extraSign',1)" v-if="hasauth(3)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M9.828 3.562a.5.5 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" transform="matrix(-1 0 0 1 16 0)"/>
                                </svg>
                                前加签
                            </button>
                            <button class="btn btn-default" @click="approval('withdraw')" v-if="hasauth(4)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                                    <path fill="currentColor" d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                                </svg>
                                撤回
                            </button>
                            <button class="btn btn-default" @click="approval('assign')" v-if="hasauth(5)" >
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M9.828 3.562a.5.5 0 0 1 .122.586l-6.5 3a.5.5 0 0 1 0 .828l6.5 3a.5.5 0 0 1-.122.91l-3 2.5a.5.5 0 0 1-.758-.656l2.5-3a.5.5 0 0 1 .828-.122l3 2.5a.5.5 0 0 1-.656.758l-2.5-3a.5.5 0 0 1-.122-.828l6.5-3a.5.5 0 0 1 0-.828l-6.5-3a.5.5 0 0 1-.586-.122l-2.5 3a.5.5 0 0 1-.758-.656l2.5-3a.5.5 0 0 1 .828-.122z"/>
                                </svg>
                                转交
                            </button>
                            <!-- <button class="btn btn-default">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16" width="16" height="16">
                                    <path fill="currentColor" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path fill="currentColor" d="M7 8h2a.5.5 0 0 1 0 1H7V8zm5 0h-2a.5.5 0 0 1 0-1h2v1z"/>
                                </svg>
                                评论
                            </button> -->
                        </div>
                        </footer>
                    </div>
                </a-card>
            </pane>
        </splitpanes>
        <select-org-user ref="selectOrgUserRef" mode="multiple" @save="saveSelectedUser"/>
    </div>
</template>

<script setup lang="ts" name="approvalFormList">
import { apiGetUserApprovalFormList,apiInstanceAddExtraSign,apiProcessTransitionFlowAsync,apiWFGetWorkFlowProcess } from '@/api/flow/flow';
import { computed, nextTick, onMounted, onUnmounted, reactive, useTemplateRef, watch } from 'vue';
import type { ResType } from '@/api/types';
// @ts-ignore
import { Splitpanes, Pane } from 'splitpanes'
import { apiGetGroupWfFlowFormList } from '@/api/flow/wfGroup';
import type { apiGetGroupWfFlowFormListType } from '../flowSetting/types';
import lfRender from '../form/components/lfRender/index.vue'
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';
import { useMapDictList } from '@/hooks';
import { getUUID, showMsg } from '@/utils';
import loading2 from '@/components/loading/loading2.vue';
import SelectOrgUser from '@/components/select-org-user/index.vue'
import type { ApprovalNodeType } from '@/views/flowCenter/components/logicFlow/types';

const selectOrgUserRef = useTemplateRef('selectOrgUserRef')

const userInfoStore = useUserInfo()

const {state:userInfoState} = storeToRefs(userInfoStore)

const state = reactive({
    queryForm:{
        searchFlag:0,
    } as any,
    tableData:[] as any[],
    loading:false,
    tableParams:{
        page: 1,
		pageSize: 10,
		total: 0 as any,
    },
    activeIndex:-1,
    options:[] as any[],
    activeWf:null as any,
    ob:null as any,
    noData:false,
    isGetMore:false,
    assignUserId:null, // 转交用户
    approvalType:"",    
    extraSignType:null as any
})

const widgets = computed(()=>{
    if(!state.activeWf) return []
    let widgets = JSON.parse(state.activeWf.formWidgets)
    return widgets
})

const formData = computed(()=>{
    if(!state.activeWf) return {}
    let formData = JSON.parse(state.activeWf.formData)
    return formData
})

const handdleTabChange = async ()=>{
    state.tableParams.page = 1
    await handleQuery()
}

const handleQuery = async()=>{
    nextTick(async()=>{
        state.loading = true
        let query = Object.assign(state.queryForm,state.tableParams)
        const res = await apiGetUserApprovalFormList({...query}) as ResType<any>
        if(state.isGetMore){
            state.tableData.push(...res.data.result)
        }else {
            state.tableData = res.data.result
        }
        state.tableParams.total = state.tableData.length 
        if(res.data.result == 0) state.noData = true // 无数据
        state.loading = false
        state.isGetMore = false
    })
}

const getMoreData = async ()=>{
    if(state.noData) {
        showMsg("暂无数据",'info')
        return
    }
    state.isGetMore = true
    state.tableParams.page++
    await handleQuery()
}

const handleReset = async()=>{
    state.queryForm = {
        searchFlag:0
    }
    state.tableParams = {
        page: 1,
		pageSize: 10,
		total: 0 as any,
    }
    await handleQuery()
}


const selectFlowForm = async(wf:any,index:number)=>{
    state.activeIndex = index
    state.activeWf = wf
    console.log(state.activeWf)
    await getWorkFlowProcess(wf.formDataId)
}


const getWorkFlowProcess = async (id:any)=>{
    const res = await apiWFGetWorkFlowProcess(id) as ResType<any>
    state.activeWf.wfProcess = res.data.result
}

const handleQueryFormGroupList = async ()=>{
    const res = await apiGetGroupWfFlowFormList() as ResType<apiGetGroupWfFlowFormListType[]>
    state.options = res.data.result.map((item)=>{
        return {
            value:item.id,
            label:item.name
        }
    })
}

const approval = async(type:string,extraSignType?:number)=>{
    state.approvalType = type
    switch(type){
        case "agree":
            await agree()
            await handleQuery()
            await getWorkFlowProcess(state.activeWf.formDataId)
            break
        case "disagree":
            await disagree()
            await handleQuery()
            await getWorkFlowProcess(state.activeWf.formDataId)
            break;
        case "withdraw":
            await withdraw()
            break;
        case "assign":
            selectOrgUserRef.value?.handleOpen()
            break;
        case "extraSign":
            state.extraSignType = extraSignType
            selectOrgUserRef.value?.handleOpen()
            break;
    }
}

const hasauth = (type:any)=>{
    if(state.activeWf.wfProcess == null) return false
    return state.activeWf.wfProcess.menus.includes(type)
}

const agree = async ()=>{
    const res = await apiProcessTransitionFlowAsync({
        applyId:userInfoState.value.userInfos.id,
        menuType:0, //同意标志
        flowId:state.activeWf.flowId,
        formDataId:state.activeWf.formDataId,
        approvalInsId:state.activeWf.wfProcess.approvalInsId
    }) as ResType<any>
    if(res.data.code == 200){
        showMsg("审批通过",'success')
    }else{
        showMsg("审批失败，请检查",'warning')
    }
}

const disagree = async ()=>{
    const res = await apiProcessTransitionFlowAsync({
        applyId:userInfoState.value.userInfos.id,
        menuType:1, //拒绝标志
        flowId:state.activeWf.flowId,
        formDataId:state.activeWf.formDataId,
        approvalInsId:state.activeWf.wfProcess.approvalInsId
    }) as ResType<any>
    if(res.data.code == 200){
        showMsg("审批拒绝",'success')
    }else{
        showMsg("审批失败，请检查",'warning')
    }
}

const withdraw = async ()=>{
    const res = await apiProcessTransitionFlowAsync({
        applyId:userInfoState.value.userInfos.id,
        menuType:4, //撤回标志
        flowId:state.activeWf.flowId,
        formDataId:state.activeWf.formDataId,
        approvalInsId:state.activeWf.wfProcess.approvalInsId
    }) as ResType<any>
    if(res.data.code == 200){
        showMsg("撤回成功",'success')
    }else{
        showMsg("撤回失败，请检查",'warning')
    }
}

const assign = async ()=>{
    const res = await apiProcessTransitionFlowAsync({
        applyId:userInfoState.value.userInfos.id,
        menuType:5, //撤回标志
        flowId:state.activeWf.flowId,
        formDataId:state.activeWf.formDataId,
        approvalInsId:state.activeWf.wfProcess.approvalInsId,
        assignUserId:state.assignUserId
    }) as ResType<any>
    if(res.data.code == 200){
        showMsg("转交成功",'success')
        await handleQuery()
        await getWorkFlowProcess(state.activeWf.formDataId)
    }else{
        showMsg("转交失败，请检查",'warning')
    }
    state.assignUserId = null
}

const extraSign = async ()=>{
    // 模拟节点数据
    const approval = {
        id:"node" + getUUID(),
        properties:{
            name:"加签",
            prop:"approval",
            assignees:state.assignUserId
        }
    }
    const asignJson = {
        applyId:userInfoState.value.userInfos.id,
        flowId:state.activeWf.flowId,
        formDataId:state.activeWf.formDataId,
        approvalInsId:state.activeWf.wfProcess.approvalInsId,
        nodeId:state.activeWf.wfProcess.currentNodeId,
        extraNode:approval,
        extraSignType:state.extraSignType
    }

    const res:ResType<any> = await apiInstanceAddExtraSign(asignJson)
    if(res.data.code == 200){
        showMsg("加签成功",'success')
        await handleQuery()
        await getWorkFlowProcess(state.activeWf.formDataId)
    }else{
        showMsg("加签失败，请检查",'warning')
    }
    state.extraSignType = null
    state.assignUserId = null
}

const saveSelectedUser = async(users:any[])=>{
    if(users.length > 1) {
        showMsg("只能选一个转交人",'warning')
        return
    }
    if(state.approvalType == "assign"){
        state.assignUserId = users[0].id
        await assign()
    }else if(state.approvalType == "extraSign"){
        //偷懒直接赋值了
        state.assignUserId = users.map(i=>({id:i.id,realName:i.realName}))
        await extraSign()
    }
}

onMounted(()=>{
    handleQuery()
    handleQueryFormGroupList()
})

</script>

<style lang="scss" scoped>
.flow-list-container{
    .card-table{
        :deep(.ant-card-body){
            height: 100%;
        }
    }
}
:deep(.ant-table-cell-fix-right){
    // right: 0 !important;
}
:deep(.ant-btn >span) {
    display:inline-flex!important;
}
:deep(.ant-card-body){
    height:100%;
}
.flow-list{
    height:100%;
    overflow: hidden;
    user-select: none;
    .list{
        height: calc(100% - 90px);
        overflow: hidden;
        scrollbar-gutter: stable;
        overflow-y: auto;
        // 滚动条样式
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 4px;
            position: relative;
        }
        // 悬停效果
        &::-webkit-scrollbar-thumb:hover {
            background-color: #a19e9e;
        }

        // 悬停时三角形颜色变化
        &::-webkit-scrollbar-thumb:hover::before {
            border-bottom-color: #a19e9e;
        }

        &::-webkit-scrollbar-thumb:hover::after {
            border-top-color: #a19e9e;
        }
        header{
            font-weight: 550;
        }
        .content{
            font-size: 12px;
            color:#a19e9e;
            .user{
                width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .time{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .form-item{
            &:hover{
                border:1px solid #1890ff;
            }
            &.active{
                border:1px solid #1890ff;
            }
        }
    }
}
.wf{
    :deep(.ant-card-body){
        padding: 0;
    }
}

.wf-container{
    width: 100%;
    height: 100%;
    overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 4px;
            position: relative;
        }
        // 悬停效果
        &::-webkit-scrollbar-thumb:hover {
            background-color: #a19e9e;
        }

        // 悬停时三角形颜色变化
        &::-webkit-scrollbar-thumb:hover::before {
            border-bottom-color: #a19e9e;
        }

        &::-webkit-scrollbar-thumb:hover::after {
            border-top-color: #a19e9e;
        }
    .id{
        color: #818181;
    }
}

.form-render{
    .form-item{}
}

.form-render {
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.form-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.form-divider {
  height: 2px;
  background: linear-gradient(to right, #4f46e5, #8b5cf6);
  margin-top: 8px;
  width: 60px;
}

.form-content {
  padding: 20px;
}

.form-item {
  display: flex;
  margin-bottom: 16px;
 
  border-bottom: 1px dashed #f0f0f0;
  align-items: center;
}

.form-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-label {
  flex: 0 0 120px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.required-mark {
  color: #f56c6c;
  margin-left: 4px;
}

.form-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  padding-left: 12px;
  word-break: break-word;
}

.empty-value {
  color: #999;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-label {
    flex: none;
    margin-bottom: 8px;
  }

  .form-value {
    padding-left: 0;
    width: 100%;
  }
}
 .approval{
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    
    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: #a19e9e;
        border-radius: 4px;
        
        &:hover {
            background-color: #ccc;
        }
    }
 }
.timeline-title {
    font-size: 14px;
}
.timeline-content {
    font-size: 12px;
    margin-top: 4px;
}


.approval-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #e8e8e8;
  background-color: #fff;
}

.approval-actions {
  display: flex;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  gap: 6px;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-danger {
  background-color: #ff4d4f;
  color: white;
}

.btn-danger:hover {
  background-color: #ff7875;
}

.btn-default {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
}

.btn-default:hover {
  background-color: #e8e8e8;
}

.icon {
  width: 16px;
  height: 16px;
}
</style>

